<template>
  <div>
    <!-- <headerNavigation :jump="0"></headerNavigation> -->
    <!-- 标签导航区 -->
    <div class="main-navigation">
      <button class="navigation-abel" @click="goclass">班级</button>
      <i class="el-icon-arrow-right"></i>
      <button class="navigation-abel" @click="gotoreport">{{this.stuName}}的成长报告</button>
      <i class="el-icon-arrow-right"></i>
      <button class="navigation-abel">{{semesterName}}</button>
    </div>

    <div class="box">
      <div class="word">
        <div class="flash">
          <!--在这个flash标签里设置书本翻页的3d动画-->
          <!-- 动态翻页效果 -->
          <!-- <div style="background:#7cd000;width:100px;height:100px;"></div> -->
          <div class="navflipbook" ref="tilt">
              <div :ref="'fanye' + index" v-for="(item ,index) in flipbook" :key="index" class="page" @click="leftfilp(index)">
                <img :class="['fanye',`fanye${index}` ]" :src="item.title" alt="">
              </div>
          </div>
        </div>

        <div class="right">
          <div class="year">{{semesterName}}</div>
          <div class="make">制作中</div>
        </div>
      </div>

      <div class="Info">
        <div class="Picture">
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="item in 4" :key="item">
              <!-- 第一个页面 -->
              <div style="display: flex; flex-direction: row" v-show="1 == item">
                <div class="picture1">
                  <img src="@/assets/imagesbackground/Myself.png" alt="" class="img" />
                  <div class="photo2" v-if="ismeList.status== '1'">
                    <img :src="`${src1 + ismeList['img1']}`" class="img1" />
                  </div>
                  <div class="photo10"></div>
                </div>

                <div class="picture">
                  <img src="@/assets/imagesbackground/MyFirend.png" alt="" class="img" />
                  <div class="photo1" v-if="childList.status == '1'">
                    <img :src="`${src1 + childList['img1']}`" alt="" class="img2" />
                    <img :src="`${src1 + childList['img2']}`" class="img3" />
                  </div>
                </div>

                <div class="picture">
                  <img src="@/assets/imagesbackground/Word.png" alt="" class="img" />
                  <div class="photo2" v-if="wordList.status == '1'">
                    <img :src="`${src1 + wordList['img1']}`" alt="" class="img1" />
                  </div>
                </div>

                <div class="picture1">
                  <img src="@/assets/imagesbackground/MyHomework.png" alt="" class="img" />
                  <div class="photo2" v-if="workList.status == '1'">
                    <img :src="`${src1 + wordList['img1']}`" alt="" class="img1" />
                  </div>
                </div>
              </div>

              <!-- 第二个页面 -->
              <div style="display: flex; flex-direction: row" v-show="2 == item">

                <div class="picture1">
                  <img src="@/assets/imagesbackground/Theme.png" alt="" class="img" />
                  <div class="photo2" v-if="thingList.status == '1'">
                    <img :src="`${src1 + thingList['img1']}`" class="img1" />
                  </div>
                </div>

                <div class="picture1">
                  <img src="@/assets/imagesbackground/score.png" alt="" class="img" />
                  <div class="photo2" v-if="paperList.status == '1'">
                    <img :src="`${src1 + paperList['img1']}`" class="img1" />
                  </div>
                </div>

                <div class="picture1">
                  <img src="@/assets/imagesbackground/Action.png" alt="" class="img" />
                  <div class="photo1" v-if="activityList.status == '1'">
                    <img :src="`${src1 + activityList['img1']}`" alt="" class="img2" />
                    <img :src="`${src1 + activityList['img2']}`" class="img3" />
                  </div>
                </div>

                <div class="picture1">
                  <div class="background">
                    <img class="backgroundimg" src="@/assets/imagesbackground/Report.png" />
                    <img class="imgreport" src="@/assets/images/StudentReport.png" />
                  </div>

                  <div v-if="resultList.status == '1'">
                    <div class="name">
                      <span>{{ resultList["班级"] }}</span>
                      <span>{{ resultList["学生姓名"] }}</span>
                    </div>
                    <div class="height">
                      <span>{{ resultList["身高"] }}</span>
                      <span>{{ resultList["体重"] }}</span>
                    </div>
                    <div class="ear">
                      <span>{{ resultList["左眼"] }}</span>
                      <span>{{ resultList["右眼"] }}</span>
                    </div>
                    <div class="resport1">
                      <div class="score">
                        <span>{{ resultList["成绩"]["语文"] }}</span>
                        <span>{{ resultList["成绩"]["数学"] }}</span>
                        <span>{{ resultList["成绩"]["英语"] }}</span>
                        <span>{{ resultList["成绩"]["科学"] }}</span>
                      </div>
                      <div class="score">
                        <span>{{ resultList["综合评价等第"]["语文"] }}</span>
                        <span>{{ resultList["综合评价等第"]["数学"] }}</span>
                        <span>{{ resultList["综合评价等第"]["英语"] }}</span>
                        <span>{{ resultList["综合评价等第"]["科学"] }}</span>
                      </div>
                    </div>

                    <div class="resport2">
                      <div class="assess">
                        <span>{{ resultList["综合评价等第"]["道德与法"] }}</span>
                        <span>{{ resultList["综合评价等第"]["体育"] }}</span>
                      </div>
                      <div class="assess">
                        <span>{{ resultList["综合评价等第"]["音乐"] }}</span>
                        <span>{{ resultList["综合评价等第"]["信息"] }}</span>
                      </div>
                      <div class="assess">
                        <span>{{ resultList["综合评价等第"]["美术"] }}</span>
                        <span>{{ resultList["综合评价等第"]["综合实践"] }}</span>
                      </div>
                    </div>
                    <div class="showreport">
                      <div class="allassesss">
                        <span>{{ resultList["综合评价等第"]["听课专注"] }}</span>
                        <span>{{ resultList["综合评价等第"]["做事负责"] }}</span>
                      </div>
                      <div class="allassesss">
                        <span>{{ resultList["综合评价等第"]["学习主动"] }}</span>
                        <span>{{ resultList["综合评价等第"]["同学合作"] }}</span>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

              <!-- 第三个页面 -->
              <div style="display: flex; flex-direction: row" v-show="3 == item">
                <div class="picture1">
                  <img src="@/assets/imagesbackground/AwaitWord.png" alt="" class="img" />
                  <div div="send" v-if="sendList.status == '1'">
                    <span class="send1">{{ sendList["班主任寄语"] }}</span>
                    <span class="send2">{{ sendList["任课老师寄语"] }}</span>
                  </div>
                </div>

                <div class="picture1">
                  <img src="@/assets/imagesbackground/FirendWord.png" alt="" class="img" />
                  <div v-if="talkList.status == '1'">
                    <img :src="`${src1 + talkList['img1']}`" class="img10" />
                    <img :src="`${src1 + talkList['img1']}`" class="img11" />
                    <img :src="`${src1 + talkList['img1']}`" class="img12" />
                  </div>
                </div>

                <div class="picture1">
                  <img src="@/assets/imagesbackground/Honour.png" alt="" class="img" />
                  <img src="@/assets/images/StudentHonour.png" alt="" class="img10" />
                  <img src="@/assets/images/StudentHonour.png" alt="" class="img11" />
                  <img src="@/assets/images/StudentHonour.png" alt="" class="img12" />
                  <div v-if="honourList.status == '1'">
                    <img :src="`${src1 + honourseal[0]}`" class="sealimg1" />
                    <img :src="`${src1 + honourseal[1]}`" class="sealimg2" />
                    <img :src="`${src1 + honourseal[2]}`" class="sealimg3" />
                  </div>

                  <div class="info">
                  </div>
                </div>

                <div class="picture1">
                  <img src="@/assets/imagesbackground/sum.png" alt="" class="img" />
                  <div v-if="sumList.status == '1'">
                    <img :src="`${src1 + sumList['img1']}`" class="img10" />
                    <img :src="`${src1 + sumList['img1']}`" class="img11" />
                    <img :src="`${src1 + sumList['img1']}`" class="img12" />
                  </div>
                </div>
              </div>

              <!-- 第四个页面 -->
              <div style="display: flex; flex-direction: row" v-show="4 == item">
                <div class="picture1">
                  <img src="@/assets/imagesbackground/Grow.png" alt="" class="img" />
                  <div class="photo2" v-if="contentsList.status == '1'">
                    <img :src="`${src1 + contentsList['img1']}`" class="img1" />
                  </div>
                </div>

                <div class="picture1">
                  <img src="@/assets/imagesbackground/Personality.png" alt="" class="img" />
                  <div class="photo2" v-if="specificList.status == '1'">
                    <img :src="`${src1 + specificList['img1']}`" class="img1" />
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <!-- <footerNavigation></footerNavigation> -->
  </div>
</template>


<script>
import module from "@/allurlimg/img"
// import headerNavigation from "@/views/components/background/headerNavigation1"
// import footerNavigation from "@/views/components/background/footerNavigation"
import { makereport } from '@/api/luoc.api/luo3.js'


export default {
  data () {
    return {
      src1: '',
      semesterName: this.semesterName,
      flipbook: [
        { id: 1, title: require('./image/010.png'), transform: 'rotateY(0deg)' },
        { id: 2, title: require('./image/002.png'), transform: 'rotateY(0deg)' },
        { id: 3, title: require('./image/003.png'), transform: 'rotateY(0deg)' },
        { id: 4, title: require('./image/004.png'), transform: 'rotateY(0deg)' },
        { id: 5, title: require('./image/005.png'), transform: 'rotateY(0deg)' },
        { id: 6, title: require('./image/006.png'), transform: 'rotateY(0deg)' },
        { id: 7, title: require('./image/007.png'), transform: 'rotateY(0deg)' },
        { id: 8, title: require('./image/008.png'), transform: 'rotateY(0deg)' },
        { id: 9, title: require('./image/009.png'), transform: 'rotateY(0deg)' },
        { id: 10, title: require('./image/001.png'), transform: 'rotateY(0deg)' },
      ],
      message: {},
      growthItem: [],
      reportList: [],
      ismeList: [],
      childList: [],
      wordList: [],
      workList: [],
      thingList: [],
      paperList: [],
      activityList: [],
      resultList: [],
      sendList: [],
      talkList: [],
      honourList: [],
      sumList: [],
      contentsList: [],
      specificList: [],
      seals: [],
      honourseal: [],
    }
  },
  mounted () {
    window.onbeforeunload = function (e) {
      var storage = window.localStorage;
      storage.clear()
    }
    this.src1 = module.host;
  },
  components: {
    // headerNavigation,
    // footerNavigation,
  },
  methods: {
    /*点击翻页效果 */
    leftfilp(index) {
      this.$refs[`fanye${index}`][0].classList.add('active')
    },
    goclass () {
      this.$router.push('/goclass')
    },
    gotoreport(){
      this.$router.back()
    },
    /*调用成长报告图片 */
    async gets () {
      console.log(this.growthId, this.studentId)
      const res = await makereport({
        growthId: this.growthId,
        studentId: this.studentId
      })
      console.log(res)
      this.growthItem = res.data
      console.log(this.growthItem)
      console.log(this.semesterName)


      this.seals = this.growthItem["seals"]
      /*0页面图片信息*/
      // console.log(this.growthItem['0'])
      if (this.growthItem['0']['status'] == 1) {
        this.ismeList = this.growthItem['0']
        // let getfile = `http://1.15.237.156:8080/` + '/getFile?name = '+imgsSrc
        // this.imgs=this.data.imgs.concat(imgsSrc)
        // console.log(this.ismeList)
        // console.log(this.ismeList['img1'])
      }

      // console.log(this.growthItem['1'])
      if (this.growthItem['1']['status'] == 1) {
        this.childList = this.growthItem['1']
      }
      // console.log(this.childList)


      if (this.growthItem['12']['status'] == 1) {
        this.wordList = this.growthItem['12']
      }
      // console.log(this.wordList)

      if (this.growthItem['3']['status'] == 1) {
        this.workList = this.growthItem['3']
      }

      if (this.growthItem['4']['status'] == 1) {
        this.thingList = this.growthItem['4']
      }


      if (this.growthItem['5']['status'] == 1) {
        this.paperList = this.growthItem['5']
      }

      if (this.growthItem['6']['status'] == 1) {
        this.activityList = this.growthItem['6']
      }

      if (this.growthItem['13']['status'] == 1) {
        this.resultList = this.growthItem['13']
      }

      if (this.growthItem['2']['status'] == 1) {
        this.sendList = this.growthItem['2']
      }

      if (this.growthItem['7']['status'] == 1) {
        this.talkList = this.growthItem['7']
      }

      if (this.growthItem["8"]["status"] == 1) {
        this.honourList = this.growthItem["8"];
        if (this.honourList['honor1'] == 1) {
          this.honourseal.push(this.seals['卓越少年专用章'])
        }
        if (this.honourList['honor2'] == 1) {
          this.honourseal.push(this.seals['励志少年专用章'])
        }
        if (this.honourList['honor3'] == 1) {
          this.honourseal.push(this.seals['模范学生专用章'])
        }
        if (this.honourList['honor4'] == 1) {
          this.honourseal.push(this.seals['梦想领袖专用章'])
        }
        if (this.honourList['honor4'] == 1) {
          this.honourseal.push(this.seals['文明学生专用章'])
        }
      }


      if (this.growthItem['9']['status'] == 1) {
        this.xiaojieList = this.growthItem['9']
      }

      if (this.growthItem['10']['status'] == 1) {
        this.shinengList = this.growthItem['10']
      }

      if (this.growthItem['11']['status'] == 1) {
        this.gexingList = this.growthItem['11']
      }

    },
  },

  created () {
  },
  mounted () {
    // this.growthId = this.$route.message
    // this.studentId = this.$route.message
    console.log(this.$route.params)
    let stuName = this.$route.params.stuName
    let growthId = this.$route.params.growthId
    console.log(growthId)
    let studentId = this.$route.params.studentId
    let semesterName = this.$route.params.semesterName
    if (growthId !== undefined) {
      sessionStorage.setItem('growthId', growthId)
      this.growthId = sessionStorage.getItem('growthId')
    } else {
      this.growthId = sessionStorage.getItem('growthId')
    }

    if (studentId !== undefined) {
      sessionStorage.setItem('studentId', studentId)
      this.studentId = sessionStorage.getItem('studentId')
    } else {
      this.studentId = sessionStorage.getItem('studentId')
    }

    if (semesterName !== undefined) {
      sessionStorage.setItem("semesterName", semesterName);
      this.semesterName = sessionStorage.getItem("semesterName");
    } else {
      this.semesterName = sessionStorage.getItem("semesterName");
    }

    if (stuName !== undefined) {
      sessionStorage.setItem("stuName", stuName);
      this.stuName = sessionStorage.getItem("stuName");
    } else {
      this.stuName = sessionStorage.getItem("stuName");
    }

    // console.log(this.growthId,this.studentId)
    // console.log(this.messageList)
    this.gets()
    this.src1 = module.host;
    // console.log(this.growthItem['0'])
    // if(this.growthItem[0]['status']==1){
    //   this.imgsSrc = this.growthItem['0']['img1']
    //   // let getfile = `http://1.15.237.156:8080/` + '/getFile?name = '+imgsSrc
    //   // this.imgs=this.data.imgs.concat(imgsSrc)
    //   console.log(this.imgsSrc)
    // }
  }
}
</script>


<style scoped>
/*内容区域的盒子 */
.box {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;

  line-height: 0.625rem;
  width: 100%;
  height: 50rem;
}
.el-icon-arrow-right:before {
  font-size: 2.25rem;
}

/*上面的翻页和文字一起的盒子*/
.word {
  display: flex;
}
/*页面下半部分的内容*/
.Info {
  display: flex;
  margin-top: 3.125rem;
}
/*成长报告相关页面 */
.Picture {
  display: flex;
  margin-left: 9.375rem;
}
/*学年学期*/
.word .year {
  margin-top: 3.25rem;
  margin-left: 2.4375rem;
  font-size: 2rem;
}

.back {
  font-size: 1.125rem;
  text-align: center;
  position: absolute;
  left: 13.125rem;
  border: 0rem;
  background: #fff;
}
/*文字制作中 */
.word .make {
  background-color: #f2e5e5;
  width: 5.375rem;
  height: 2.25rem;
  font-size: 0.625rem;
  line-height: 2.25rem;
  margin-left: 2.4375rem;
  margin-top: 1.875rem;
  border-radius: 0.3125rem;
}
/*导出相册按钮 */
.word .gomake {
  background-color: #101010;
  width: 9.625rem;
  height: 2.875rem;
  font-size: 0.625rem;
  line-height: 2.875rem;
  margin-left: 2.4375rem;
  margin-top: 3.125rem;
  color: #d9d6d9;
  border-radius: 0.3125rem;
}

/*一个模本盒子*/
.picture1 {
  width: 13.75rem;
  height: 19.375rem;
  position: relative;
}

.zhaopian {
  width: 13.75rem;
  height: 19.375rem;
  margin-left: 1.0625rem;
}

/*右边的文本框 */
.right {
  display: flex;
  flex-direction: column;
  text-align: center;
}
/* 放翻页书的盒子*/
.flash {
  background-color: #ffffff;
  width: 31.25rem;
  height: 17.25rem;
  margin-left: 26.875rem;
  margin-top: 2.875rem;
  display: flex;
}
/*翻页效果的样式*/
.navflipbook {
  cursor: pointer;
  position: relative;
  display: flex;
  transition: all 0.8s;
  transform-style: preserve-3d;
  transform: perspective(589px) rotateX(360deg);
  width: 400px;
}

.tiltnavflipbook {
  transform: perspective(589px) rotateX(420deg);
}
.page {
  position: absolute;
  transform-style: preserve-3d;
  width: 50%;
  left: 25%;
  transition: all 0.8s;
  transform-origin: left;
  transform: rotateY(0deg);
}
@keyframes test {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(-180deg);
  }
}

@keyframes moveshadow {
  0% {
    filter: brightness(100%);
  }
  50% {
    filter: brightness(50%);
  }
  100% {
    filter: brightness(100%);
  }
}
.fanye {
  width: 100%;
  transform-origin: center left;
}

.fanye1 {
  animation: test 2s ease-in-out forwards;
}
.fanye2 {
  animation: test 4s ease-in-out forwards;
}

.fanye3 {
  animation: test 6s ease-in-out forwards;
}

.fanye4 {
  animation: test 8s ease-in-out forwards;
}
.fanye5{
  animation: test 10s ease-in-out forwards;
}

.active .fanye {
  /*animation: test 0.4s ease-out;*/
  animation: test 2s ease-out forwards;
  transform-origin: center left;
}

/*0*/
/*一个模本盒子*/
.picture1 {
  display: flex;
  width: 13.75rem;
  height: 19.375rem;
  margin-left: 1.0625rem;
}
/*背景照片*/
.img {
  height: 19.375rem;
  width: 13.75rem;
}
/*内容照片 */
.photo2 {
  height: 13.1875rem;
  width: 9.875rem;
  position: absolute;
  z-index: 2;
  top: 0px;
  margin-top: 2.75rem;
  margin-left: 2rem;
}
/*上传的照片*/
.img1 {
  position: relative;
  height: 13.1875rem;
  width: 9.875rem;
  z-index: 2;
}

/*我和我的小伙伴 */
/*一个模本盒子*/
.picture {
  display: flex;
  width: 13.75rem;
  height: 19.375rem;
  margin-left: 1.0625rem;
}
/*背景照片*/
.img {
  height: 19.375rem;
  width: 13.75rem;
}
/*内容照片 */
.photo1 {
  height: 13.1875rem;
  width: 9.875rem;
  position: absolute;
  z-index: 2;
  top: 0px;
  margin-top: 2.75rem;
  margin-left: 2rem;
}
.img2 {
  position: relative;
  height: 5.5rem;
  width: 9.875rem;
}
.img3 {
  position: relative;
  height: 5.5rem;
  width: 9.875rem;
  margin-top: 1.9375rem;
}

/*使用跑马灯的组件实现轮播效果 */
.el-carousel {
  width: 75rem;
  justify-items: center;
  align-content: center;
}

/*成长报告和按钮之间的距离 */
.el-carousel__item.is-animating {
  margin-left: 6.875rem;
}

.background {
  display: flex;
}

.backgroundimg {
  height: 19.375rem;
  width: 13.75rem;
  z-index: 1;
  position: relative;
  margin: 0 auto;
}
.imgreport {
  position: absolute;
  z-index: 2;
  height: 15rem !important;
  width: 11.875rem !important;
  left: 50.1%;
  top: 48.5%;
  transform: translate(-50%, -50%);
}
/* 信息 */
.name {
  display: flex;
  z-index: 3;
  position: absolute;
  top: 20.5%;
  left: 15%;
  font-size: 0.25rem;
  width: 6.875rem;
  justify-content: space-between;
}
.height {
  display: flex;
  z-index: 3;
  position: absolute;
  top: 24.5%;
  left: 15%;
  font-size: 0.25rem;
  width: 6.875rem;
  justify-content: space-between;
}
.ear {
  z-index: 3;
  position: absolute;
  top: 24.5%;
  right: 15%;
  font-size: 0.25rem;
  width: 0.625rem;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 1.25rem;
}
.score {
  display: flex;
  width: 7.5rem;
  justify-content: space-between;
}
.resport1 {
  z-index: 3;
  position: absolute;
  top: 34.8%;
  right: 18%;
  font-size: 0.25rem;
}
.assess {
  width: 6.25rem;
  display: flex;
  justify-content: space-between;
}
.resport2 {
  z-index: 3;
  position: absolute;
  top: 50.2%;
  right: 20%;
  font-size: 0.8125rem;
}
.allassesss {
  display: flex;
  width: 6.25rem;
  justify-content: space-between;
}
.showreport {
  z-index: 3;
  position: absolute;
  top: 70.5%;
  right: 20%;
  font-size: 0.8125rem;
}
/* 按钮 */
.btn {
  color: rgba(16, 16, 16, 1);
  font-size: 0.875rem;
  text-align: center;
  border: 1px solid rgba(187, 187, 187, 1);
  background-color: rgba(124, 0, 0, 1);
  width: 8.125rem;
  height: 2.1875rem;
  color: rgba(255, 255, 255, 1);
}
.btnCountainer {
  width: 100%;
  text-align: center;
  margin-top: 2.5rem;
}

.send1 {
  position: absolute;
  height: 6.25rem;
  width: 10.625rem;
  z-index: 2;
  top: 18%;
  left: 15%;
  line-height: 0.9375rem;
}

.send2 {
  position: absolute;
  height: 6.25rem;
  width: 10.625rem;
  z-index: 2;
  top: 60%;
  left: 15%;
  line-height: 0.9375rem;
}
.img10 {
  height: 4.375rem;
  width: 11.25rem;
  position: absolute;
  z-index: 2;
  top: 1.875rem;
  left: 1.25rem;
}
.img11 {
  height: 4.375rem;
  width: 11.25rem;
  position: absolute;
  z-index: 2;
  top: 7.5rem;
  left: 1.25rem;
}
.img12 {
  height: 4.375rem;
  width: 11.25rem;
  position: absolute;
  z-index: 2;
  top: 13.125rem;
  left: 1.25rem;
}

/* 8页面的字*/
.info {
  position: absolute;
  top: 20%;
  left: 40%;
  z-index: 3;
}
.info2 {
  margin-top: 60%;
  display: inline-block;
  width: 60%;
  word-wrap: break-word;
  white-space: normal;
}
.info3 {
  margin-top: 60%;
  display: inline-block;
  width: 60%;
  word-wrap: break-word;
  white-space: normal;
}

/*小伙伴的话页面的字 */
.word1 {
  position: absolute;
  top: 14%;
  left: 17%;
  z-index: 3;
  width: 8.75rem;
  font-size: 0.8125rem;
}

.word2 {
  display: inline-block;
  width: 9.1875rem;
  height: 2rem;
}

.word3 {
  display: inline-block;
  width: 9.1875rem;
  height: 2rem;
  margin-top: 42%;
}

.word4 {
  display: inline-block;
  width: 9.1875rem;
  height: 2rem;
  margin-top: 42%;
}
.word5 {
  margin-left: 90%;
  font-size: 0.0625rem;
}
/* 标签导航区内容 */
.main-navigation {
  margin: 1.25rem;
  display: flex;
  margin: 0 28.125rem 0 28.125rem;
  flex-direction: row;
}
.icon-shouye-copy {
  color: rgb(202, 160, 166);
  font-size: 1.5625rem;
  margin-right: 0.1875rem;
}
.icon-right-1-copy {
  color: darkgray;
  font-size: 1.5625rem;
  padding: 0.4375rem;
}
.navigation-abel1 {
  width: 6.25rem;
  border-radius: 1.5625rem;
  border: 0rem;
  padding: 0.625rem;
  line-height: 0.9375rem;
  font-size: 1.25rem;
}

/* 导航标签 */
.navigation-abel {
  line-height: 1.5625rem;
  font-size: 1.25rem;
  border-radius: 1.5625rem;
  padding: 0.5rem 1.3125rem 0.5rem 1.375rem;
  border: 0rem;
  background: #f2e5e5;
}

/*印章样式 */
.seal1 {
  position: absolute;
  z-index: 4;
  width: 4rem;
  height: 2rem;
  top: 8rem;
  left: 9rem;
}

.seal2 {
  position: absolute;
  z-index: 4;
  width: 4rem;
  height: 2rem;
  top: 15rem;
  left: 9rem;
}

.sealimg1 {
  position: absolute;
  z-index: 4;
  width: 4rem;
  height: 1.5rem;
  top: 3.15rem;
  left: 5.2rem;
}
.sealimg2 {
  position: absolute;
  z-index: 4;
  width: 4rem;
  height: 1.5rem;
  top: 8.73rem;
  left: 5.2rem;
}

.sealimg3 {
  position: absolute;
  z-index: 4;
  width: 4rem;
  height: 1.5rem;
  top: 14.5rem;
  left: 5.2rem;
}
</style>